<template>
  <div class="registered-content"
       :style="{backgroundImage: 'url(' + require('@/assets/image/login-bg.png') + ')' }">

    <div class="login-title">
      <h1 class="title">请注册</h1>
      <div class="title-desc">欢迎来到方寸云播</div>
    </div>

    <van-form class="login-form"
              @submit="onSubmit">
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-1.png')" />
        <van-field v-model="phone"
                   name="phone"
                   placeholder="请输入手机号"
                   :rules="phoneRules"
                   clearable />
      </div>
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-2.png')" />
        <van-field v-model="captcha"
                   name="captcha"
                   placeholder="请输入验证码"
                   :rules="[{ required: true, message: '请输入验证码' }]"
                   clearable>
          <van-button slot="button"
                      size="small"
                      type="default"
                      class="send-sms"
                      native-type="button"
                      :disabled="this.waitTime < 60"
                      @click="sendCode">{{smsBtnText}}</van-button>
        </van-field>
      </div>
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-3.png')" />
        <van-field v-model="password"
                   name="password"
                   type="password"
                   placeholder="请输入密码"
                   :rules="passwordRules"
                   clearable />
      </div>
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-3.png')" />
        <van-field v-model="passwordConfirm"
                   name="password_confirm"
                   type="password"
                   placeholder="请输入确认密码"
                   :rules="passwordRules"
                   clearable />
      </div>
      <van-checkbox class="checkbox confirm"
                    v-model="isRead">
        <div>
          <span>我已阅读并接受</span><span class="document"
                @click="$router.push({name:'Article'})">《方寸云播用户协议》</span>
        </div>
        <div v-show="showErrorMsg"
             class="van-field__error-message">请阅读并同意条款</div>
      </van-checkbox>

      <div @click="$router.replace({name:'HomeLogin'})"
           class="switch-login">已有帐号?返回登录></div>

      <van-button type="default"
                  class="login-btn"
                  native-type="submit"
                  round
                  block
                  :disabled="loginBtnStatus">注册并登录</van-button>
    </van-form>

  </div>
</template>

<script>
import { phoneRules, passwordRules, checkFn } from '@/utils/formRules'
import { getSms } from '@/api/common'
import { smsRegister } from '@/api/registered'
import { mapMutations } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      phoneRules: Object.freeze(phoneRules),
      passwordRules: Object.freeze(passwordRules),
      phone: '',
      captcha: '',
      password: '',
      passwordConfirm: '',
      isRead: false,
      showErrorMsg: false,
      waitTime: 60
    }
  },
  watch: {
    isRead(newVal, oldVal) {
      if (newVal && this.showErrorMsg) this.showErrorMsg = false
    }
  },

  computed: {
    smsBtnText() {
      return this.waitTime < 60 ? this.waitTime : '获取验证码'
    },
    loginBtnStatus() {
      return !(
        this.phone &&
        this.captcha &&
        this.isRead &&
        this.password &&
        this.passwordConfirm
      )
    }
  },

  methods: {
    ...mapMutations({
      memberLogin: 'memberLogin'
    }),

    onSubmit(values) {
      if (!this.isRead) this.showErrorMsg = true
      else if (this.password !== this.passwordConfirm) {
        this.$toast({
          type: 'fail',
          message: '两次密码输入不一致，请重试!'
        })
      } else {
        values.inviter_id = 0 // 默认推荐人为0
        smsRegister(values)
          .then(res => {
            this.memberLogin({ token: res.result.key, info: res.result.info })
            this.$router.replace({ name: 'Recommend' })
          })
          .catch(res => {
            this.$toast({
              type: 'loading',
              message: res.message || '注册失败，请重试'
            })
          })
      }
    },

    sendCode() {
      // 验证手机号
      let { state, error } = checkFn(phoneRules, this.phone)

      if (!state) {
        getSms(1, this.phone)
          .then(res => {
            this.$toast({
              type: 'success',
              message: '发送成功'
            })
            let interval = setInterval(() => {
              if (this.waitTime === 0) {
                clearInterval(interval)
                this.waitTime = 60
              } else this.waitTime--
            }, 1000)
          })
          .catch(res => {
            this.$toast({
              type: 'fail',
              message: res.message
            })
          })
      } else {
        this.$toast({
          type: 'fail',
          message: error
        })
      }
    }
  }
}
</script>

<style lang="scss">
.login-content,
.registered-content {
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: left;
  .document {
    color: $mainColor;
  }

  .login-title {
    padding: 55px 28px;
    color: #333333;

    .title {
      font-weight: bold;
      font-size: 37px;
      margin-bottom: 10px;
    }
    .title-desc {
      font-size: 17px;
    }
  }

  .login-form {
    font-size: 18px;
    padding: 0 48px;
    .form-icon {
      padding-top: 0.4rem;
    }
    /deep/ .van-cell {
      background-color: transparent;
      padding-left: 0.4rem;
      padding-right: 0rem;
    }
    .send-sms {
      border-color: transparent transparent transparent #e5e5e5;
      color: #999999;
      font-size: 16px;
      height: 100%;
    }
    .confirm {
      margin-top: 18px;
      font-size: 14px;
      /deep/ .van-icon {
        transform: scale(0.9);
      }
    }

    .login-btn {
      width: 100%;
      height: 44px;
      margin-top: 50px;
      background-color: #000000;
      color: #fbc491;
      font-size: 16px;
      &.van-button--disabled {
        opacity: 1;
        background-color: #f4f4f4;
        color: #666666;
      }
    }

    .switch-login {
      text-align: right;
      font-size: 12px;
      color: #666666;
      margin-top: 20px;
      padding: 10px;
    }
  }
}
</style>
